<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- <span>{{ rowData }}</span> -->
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            :inline="false"
            label-width="120px"
        >
            <el-form-item label="应用名称" prop="name" class="role_edit_item">
                <el-input v-model="name" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="应用编码" prop="code" class="role_edit_item">
                <el-input v-model="code" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item label="应用图标" prop="icon" class="role_edit_item">
                <el-input v-model="icon" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item
                label="是否站内"
                prop="isStation"
                class="role_edit_item"
            >
                <el-radio-group v-model="isStation">
                    <el-radio-button :label="true">站内</el-radio-button>
                    <el-radio-button :label="false">站外</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="应用地址" prop="url" class="role_edit_item">
                <el-input v-model="url" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item
                label="是否新窗口打开"
                prop="openNewWindow"
                class="role_edit_item"
            >
                <el-radio-group v-model="openNewWindow">
                    <el-radio-button :label="true">新窗口打开</el-radio-button>
                    <el-radio-button :label="false"
                        >当前页面跳转</el-radio-button
                    >
                </el-radio-group>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    onMounted,
    reactive,
    ref,
    toRefs,
    defineProps,
    defineEmits,
} from "vue";

const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};
const form = reactive({
    code: "",
    icon: "",
    name: "",
    isStation: true,
    openNewWindow: true,
    url: "",
});
const { code, icon, name, isStation, openNewWindow, url } = toRefs(form);
const formRef = ref(null);
const rules = {
    name: [
        {
            required: true,
            message: "请输入应用名称",
            trigger: "blur",
        },
    ],
    code: [
        {
            required: true,
            message: "请输入应用编码",
            trigger: "blur",
        },
    ],
    isStation: [
        {
            required: true,
            message: "请选择是否站内",
            trigger: "blur",
        },
    ],
    openNewWindow: [
        {
            required: true,
            message: "请选择是否新窗口打开",
            trigger: "blur",
        },
    ],
};

/**
 * @description: 数据初始化
 * @param {*}
 * @return {*}
 */
rowData.value &&
    ((name.value = rowData.value.name),
    (code.value = rowData.value.code),
    (icon.value = rowData.value.icon),
    (isStation.value = rowData.value.isStation),
    (openNewWindow.value = rowData.value.openNewWindow),
    (url.value = rowData.value.url));

/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let fd = new FormData();
            fd.append("name", form.name); //传文件
            fd.append("code", form.code);
            fd.append("icon", form.icon);
            fd.append("isStation", form.isStation);
            fd.append("openNewWindow", form.openNewWindow);
            fd.append("url", form.url);

            let res;
            if (title.value === "添加") {
                res = await VE_API.application.applicationStory(form);
            } else {
                res = await VE_API.application.applicationStory({
                    id: rowData.value.id,
                    ...form,
                });
            }
            const { code } = res;
            if (code === 0) {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};

/**
 * 获取角色详情
 */
onMounted(async () => {});
</script>

<style lang="scss">
.fl {
    float: left;
}
.p0 {
    padding: 0 !important;
}
.role_edit_item {
    width: 100%;
}
</style>
